<template>
  <!-- 一类有children,递归调用自身 -->
  <el-menu-item v-if="item.nonRenderChild || !item.children" :index="item.path">
    <div v-if="item.meta.icon" class="icon-box">
      <IconPark :class="item?.meta?.icon" :type="item.meta.icon" />
    </div>
    <template #title>
      <span>{{ item?.meta?.title }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu v-else :index="item.path">
    <template #title>
      <div v-if="item.meta.icon" class="icon-box">
        <IconPark :class="item?.meta?.icon" :type="item.meta.icon" />
      </div>
      <span>{{ item?.meta?.title }}</span>
    </template>
    <!-- 处理children  -->
    <AsideMenu v-for="it in item.children" :item="it" :key="it.path" />
  </el-sub-menu>
</template>
<script setup>
import { toRef } from "vue";
import IconPark from "@/components/library/IconPark.vue";
const props = defineProps({ item: Object });
const item = toRef(props, "item");
defineOptions({
  name: "AsideMenu",
});
</script>
<style lang="scss" scoped>
.iconpark-icon {
  color: rgba(255, 255, 255, 1);
  margin-right: 1em;
}
.el-menu-item.is-active {
  background-color: rgba(0, 82, 217, 1);
  color: rgba(255, 255, 255, 1);
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>
